// function pointTo(element, e) {
//     var elementBox = element.getBoundingClientRect();
//     return {
//         x: e.clientX - elementBox.left,
//         y: e.clientY - elementBox.top
//     };
// }
function startPoint(element) {
    var x = 0, y = 0;
    while (element != null) {
        x += element.offsetLeft;
        y += element.offsetTop;
        element = element.offsetParent;
    }
    return {
        x: x,
        y: y
    }
}
/* options参数: obj: 运动的对象 speed: 运动的持续时间(可选) changeStyle: 改变的属性，这里可能多个，所以采用函数的方式(可选) callback: 回调函数(可选) */
function animation(options) {
    if (!options.obj) {
        return false;
    }
    //设置默认持续时间
    options.speed = options.speed || '.5s';
    options.obj.style.transition = "all " + options.speed + " ease-in-out";

    options.changeStyle.call(options.obj);

    var flag = false;
    options.obj.addEventListener('transitionend', function () {
        //这里主要由于transitionend在每个属性的动画执行完多会走一遍，所以我们要让它只执行一次。
        if (!flag) {

            options.callback && options.callback();
        }
    }, false);
}
function getDirection(element, startPoint, pagePoint) {
    var halfWidth = element.offsetWidth / 2, halfHeight = element.offsetHeight / 2;
    //得到中心点
    var center = {
        x: startPoint.x + halfWidth,
        y: startPoint.y + halfHeight
    }
    //得到鼠标偏离中心点的距离
    var disX = pagePoint.x - center.x;
    var disY = pagePoint.y - center.y;
    if (disY < 0 && Math.abs(disY / disX) >= 1) {
        //上方
        return 1;
    }
    else if (disY > 0 && Math.abs(disY / disX) >= 1) {
        //下
        return 2;
    }
    else if (disX < 0 && Math.abs(disY / disX) < 1) {
        //左
        return 3;
    }
    else {
        //右
        return 4;
    }
}
/* options中的参数: 
    触发事件的载体: targetElement 
    执行动画的载体: animationElement 
*/

function HoverAction(options) {
    if (!options.targetElement || !options.animationElement) {
        return false;
    }
    this.targetElement = options.targetElement;
    this.animationElement = options.animationElement;
    this.timeId = null;
    this.speed = options.speed || "0.3s";
}
HoverAction.prototype.addEvent = function () {
    //保存this的指向
    var _this = this;
    _this.targetElement.addEventListener('mouseenter', function (e) {
        //得到鼠标的坐标
        var point = {
            x: e.pageX,
            y: e.pageY
        }
        //获得方向
        var dir = getDirection(_this.targetElement, startPoint(_this.targetElement), point);
        clearTimeout(_this.timeId);
        //取消过渡动画(防止重置动画载体位置时触发过渡效果)
        _this.animationElement.style.transition = "";
        //得到运动的方向，要确定动画载体的开始位置
        switch (dir) {
            case 1:
                _this.animationElement.style.top = "-100%";
                _this.animationElement.style.left = "0";
                break;
            case 2:
                _this.animationElement.style.top = "100%";
                _this.animationElement.style.left = "0";
                break;
            case 3:
                _this.animationElement.style.top = "0";
                _this.animationElement.style.left = "-100%";
                break;
            case 4:
                _this.animationElement.style.top = "0";
                _this.animationElement.style.left = "100%";
                break;
        }
        //异步执行
        _this.timeId = setTimeout(function () {
            animation({
                obj: _this.animationElement,
                speed: _this.speed,
                changeStyle: function () {
                    this.style.top = "0";
                    this.style.left = "0";
                }
            });
        }, 1000/60);
    }, false);
    _this.targetElement.addEventListener('mouseleave', function (e) {
        var left, top;
        var point = {
            x: e.pageX,
            y: e.pageY
        }
        clearTimeout(_this.timeId);
        _this.animationElement.style.transition = "";
        var dir = getDirection(_this.targetElement, startPoint(_this.targetElement), point);
        switch (dir) {
            case 1:
                top = '-100%';
                left = '0';
                break;
            case 2:
                top = '100%';
                left = "0";
                break;
            case 3:
                left = "-100%";
                top = "0";
                break;
            case 4:
                left = "100%";
                top = "0";
                break;
        }
        _this.timeId = setTimeout(function () {
            animation({
                obj: _this.animationElement,
                speed: _this.speed,
                changeStyle: function () {
                    this.style.top = top;
                    this.style.left = left;
                }
            });
        }, 20);
    }, false);
}    
